<template>
	<div class="inner">
		<div class="section1">
			<div class="top">
				<el-avatar :size="76" />
				<div class="author">
					<h2>角角者266500</h2>
					<p>
						<el-icon :size="16"><Setting /></el-icon>
						<span @click="mineHome">个人页设定</span>
					</p>
				</div>
			</div>
			<div class="list">
				<div class="item">
					<p>累计章节数</p>
					<span>3</span>
				</div>
				<div class="item">
					<p>累计阅读数</p>
					<span>3</span>
				</div>
				<div class="item">
					<p>累计收藏数</p>
					<span>3</span>
				</div>
			</div>
		</div>

		<div class="moudle-box">
			<div class="module-box1">
				<div class="section2">
					<div class="title">
						<h3>近期编辑作品</h3>
						<el-link>
							更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
						</el-link>
					</div>
					<div class="list">
						<div class="item">
							<div class="image">
								<img src="../assets/images/book1.jpg" alt="" />
							</div>
							<div class="text">
								<h4>test</h4>
								<p>6 天前</p>
							</div>
							<el-icon><ArrowRight /></el-icon>
						</div>
						<div class="item">
							<div class="image">
								<img src="../assets/images/book1.jpg" alt="" />
							</div>
							<div class="text">
								<h4>test</h4>
								<p>6 天前</p>
							</div>
							<el-icon><ArrowRight /></el-icon>
						</div>
					</div>
				</div>

				<div class="section3">
					<div class="title">
						<h3>平台公告</h3>
					</div>
					<div class="list">
						<div class="item">
							<el-icon :size="24" color="rgb(255 134 116)"><Bell /></el-icon>
							<div class="text">
								<span>
									【得奖公告】2025百万小说創作大賞加碼賽 -
									爆更大作戰「七月更新王」名單公布！大賞截稿倒數中！
								</span>
								<span>2025.08.06</span>
							</div>
						</div>
						<div class="item">
							<el-icon :size="24" color="rgb(255 134 116)"><Bell /></el-icon>
							<div class="text">
								<span>
									【得奖公告】2025百万小说創作大賞加碼賽 -
									爆更大作戰「七月更新王」名單公布！大賞截稿倒數中！
								</span>
								<span>2025.08.06</span>
							</div>
						</div>
						<div class="item">
							<el-icon :size="24" color="rgb(255 134 116)"><Bell /></el-icon>
							<div class="text">
								<span>
									【得奖公告】2025百万小说創作大賞加碼賽 -
									爆更大作戰「七月更新王」名單公布！大賞截稿倒數中！
								</span>
								<span>2025.08.06</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- <div class="module-box2">
				<div class="section4">
					<div class="title">
						<h3>比赛与活动</h3>
						<el-link>
							更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
						</el-link>
					</div>
					<div class="list">
						<div class="item">
							<img src="../assets/images/match1.png" alt="" />
						</div>
						<div class="item">
							<img src="../assets/images/match2.png" alt="" />
						</div>
					</div>
				</div>

				<div class="section4 section5">
					<div class="title">
						<h3>角角创作学院</h3>
						<el-link>
							更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
						</el-link>
					</div>
					<div class="list">
						<div class="item">
							<img src="../assets/images/match1.png" alt="" />
						</div>
						<div class="item">
							<img src="../assets/images/match2.png" alt="" />
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script setup>
import {
	Operation,
	Setting,
	ArrowRight,
	Bell,
	Search,
	House,
	EditPen,
	Aim,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const mineHome = () =>{
	router.push('/User');
}
</script>
<style lang="scss" scoped>
.inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	.section1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #ffffff;
		padding: 1rem;
		border-radius: 0.5rem;
		box-shadow: rgba(203, 213, 224, 0.3) 0px 0px 0.5rem 0px;
		.top {
			display: flex;
			gap: 1rem;
			align-items: center;
			margin-bottom: 1rem;
			.author {
				h2 {
					font-size: 1.25rem;
					font-weight: 400;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: #1a202c;
				}
				p {
					font-size: 0.875rem;
					line-height: 2;
					letter-spacing: 0.05em;
					color: #1a202c;
					font-weight: 500;
					display: flex;
					align-items: center;
					gap: 0.5rem;
				}
			}
		}
		.list {
			display: grid;
			gap: 0.5rem;
			grid-template-columns: repeat(2, 1fr);
			.item {
				padding: 0.5rem 1rem;
				border-radius: 0.25rem;
				border-style: solid;
				border-width: 0.0625rem;
				border-color: #edf2f7;
				min-width: 8.75rem;
				p {
					font-size: 0.75rem;
					font-weight: 400;
					line-height: 1.625;
					letter-spacing: 0.05em;
					color: #718096;
					white-space: nowrap;
				}
				span {
					font-size: 1.5rem;
					font-weight: 400;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: #1a202c;
				}
			}
		}
	}

	.section2 {
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 4rem;
			h3 {
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #1a202c;
			}
			:deep(.el-link__inner) {
				color: #fa715d;
			}
		}
		.list {
			background-color: #ffffff;
			display: flex;
			box-shadow: rgba(203, 213, 224, 0.3) 0px 0px 0.5rem 0px;
			border-radius: 0.5rem;
			flex-direction: column;
			overflow: hidden;

			.item {
				padding: 1rem;
				display: flex;
				-webkit-box-align: center;
				align-items: center;
				gap: 1rem;
				.image {
					width: 2rem;
					flex: 0 0 auto;
					img {
						display: block;
						max-width: 100%;
					}
				}
				.text {
					display: flex;
					flex-direction: column;
					flex: 1 1 0%;
					h4 {
						font-size: 0.875rem;
						font-weight: 500;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: #2d3747;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					p {
						font-size: 0.75rem;
						font-weight: 400;
						line-height: 1.625;
						letter-spacing: 0.05em;
						color: #718096;
					}
				}
			}
		}
	}

	.section3 {
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 4rem;
			h3 {
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #1a202c;
			}
		}
		.list {
			background-color: #ffffff;
			display: flex;
			box-shadow: rgba(203, 213, 224, 0.3) 0px 0px 0.5rem 0px;
			border-radius: 0.5rem;
			flex-direction: column;
			.item {
				display: flex;
				padding: 1rem;
				gap: 1rem;
				overflow: hidden;
				.text {
					display: flex;
					flex-direction: column;
					flex: 1 1 0%;
					gap: 0.25rem;
					width: 17rem;
					span {
						&:nth-of-type(1) {
							font-size: 0.875rem;
							font-weight: 500;
							line-height: 1.5;
							letter-spacing: 0.05em;
							color: #2d3747;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
						&:nth-of-type(2) {
							font-size: 0.75rem;
							font-weight: 400;
							line-height: 1.625;
							letter-spacing: 0.05em;
							color: #718096;
						}
					}
				}
			}
		}
	}

	.section4 {
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 4rem;
			h3 {
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #1a202c;
			}
			:deep(.el-link__inner) {
				color: #fa715d;
			}
		}
		.list {
			padding: 0.5rem;
			background-color: #ffffff;
			display: flex;
			gap: 0.5rem;
			box-shadow: rgba(203, 213, 224, 0.3) 0px 0px 0.5rem 0px;
			border-radius: 0.5rem;
			flex-direction: column;
			.item {
				img {
					max-width: 100%;
					height: auto;
					object-fit: cover;
					aspect-ratio: 900 / 340;
					border-radius: 0.25rem;
				}
			}
		}
	}
}

.moudle-box {
	display: flex;
	gap: 0rem;
	flex-direction: column;
	.module-box1 {
		flex: 7 1 0%;
	}
	.moudle-box2 {
		flex: 3 1 0%;
		max-width: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.moudle-box {
		gap: 2rem;
		flex-direction: row;
		.module-box2 {
			max-width: 20rem;
		}
	}
}

@media screen and (min-width: 1280px) {
	.inner {
		.section1 {
			flex-direction: row;
		}
	}
}
</style>